<template>
<div class="Aside">
    <el-menu
        class="Aside__Menu"
        :background-color="DefaultColor"
        :text-color="TextPrimary2"
        :active-text-color="PrimaryColor"
        :collapse="collapseMenu"
        @select="onSelectMenuItem"
    >
      <template v-for="(item,index) in menus">
          <template v-if="item.children">
            <MenuGroup :data="item" :index="index + '-'" :key="item.data.id"></MenuGroup>
          </template>
          <template v-else>
            <MenuItem :data="item" :index="index + '-'" :key="item.data.id"></MenuItem>
          </template>
      </template>
    </el-menu>

    <div class="Aside__Footer">
      <template v-if="serverIsDev">
        <el-row v-if="!collapseMenu">正使用测试环境数据库，请注意！！！</el-row>
      </template>
      <div class="btn-box">
        <el-button
          type="primary"
          :title="collapseMenu? '点击展开菜单':'点击收起菜单'"
          :icon="collapseMenu? 'el-icon-orange' : 'el-icon-apple'"
          class="collapse__btn"
          @click="onClickCollapse"
        >{{collapseMenu? "":"点击收起菜单"}}</el-button>
      </div>
      <div class="btn-box">
        <el-button
          type="success"
          :icon="collapseMenu? 'el-icon-medal' : ''"
          :title="collapseMenu? systemInfo:''"
          class="version__btn"
        >{{collapseMenu? "":systemInfo}}</el-button>
      </div>
    </div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'
import { computed } from 'vue'

import { checkServer } from "@/manager-core/api/login/login"
import { myMixin } from "@/manager-core/mixin/"



export default defineComponent({
  name: 'AppAside',
  components: {    
  },

  mixins: [myMixin],

  data(){
    return {
      collapseMenu: false,
      serverIsDev: false,
      testShow: true,
      avatarUrl : "/static/manager3/img/default_handsome.jpg",
      showAdminMenu : true
    }
  },

  methods:{
    init(){
      checkServer()
        .then((r:any) =>{
          this.serverIsDev = r.isdev;
        })
    },

    // 点击了收起按钮
    onClickCollapse(){
      this.collapseMenu = !this.collapseMenu;
      this.$emit("onClickCollapse",this.collapseMenu)
    },

    // 点击了菜单项
    onSelectMenuItem(index:any, indexPath:any){

      // console.log("onSelectMenuItem",index)

      this.$router.push({
        path: index
      })
      // console.log("index",index,"indexpath",indexPath)

    },

    forget(){
      // console.log("forget")
    }
  },

  computed:{
    ...mapGetters({
      menus: 'managercore/menus/menus'
    }),
    systemInfo(){
      return "version 1"
    }
  },

  mounted(){
    // console.log("on mounted Header")
  },

  setup(){    

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

.btn-box{
  width: 100%;
}

</style>
